<template>
	<view class="emergencyRescue">
		<view class="emergencyRescue-back"></view>
		<view class="emergencyRescue-content">
			<view class="content-map">
				<view class="ditu">
					<map :latitude="latitude" :longitude="longitude" scale="14"></map>
				</view>
			</view>
			<view class="content-order">
				<view class="order-top">
					<view class="top-button" tabindex="1" :style="{borderBottom:borderBottomColor}" @click="button1">搭电
					</view>
					<view class="top-button" tabindex="2" @click="button2">换胎</view>
					<view class="top-button" tabindex="3" @click="button3">拖车</view>
				</view>
				<view class="order-content">
					<form @submit.prevent="submitForm">
						<view class="form-item">
							<text class="label">位置</text>
							<input class="input" v-model="location" placeholder="请输入位置" />
						</view>
						<view class="form-item">
							<text class="label">求助人</text>
							<input class="input" v-model="helper" placeholder="请输入求助人姓名" />
						</view>
						<view class="form-item">
							<text class="label">联系方式</text>
							<input class="input" v-model="contact" placeholder="请输入联系方式" />
						</view>
						<view class="form-item">
							<text class="label">车牌</text>
							<input class="input" v-model="brand" placeholder="请输入品牌" />
						</view>
						<view class="form-item">
							<text class="label">描述</text>
							<textarea class="textarea" v-model="description" placeholder="请输入描述"></textarea>
						</view>
						<button class="submit-button" type="submit">呼叫救援</button>
						<view class="button-bottom" @click="toRescueRecord">救援记录></view>
					</form>

				</view>
			</view>
			<view class="order-bottom">
				<view class="bottom-top">
					警务救助
				</view>
				<view class="bottom-bottom">
					<view class="rescue">
						<image src="/static/my/交通事故 拷贝.png" class="rescue-pic"></image>
						<view>交通事故</view>
						<text>122</text>
					</view>
					<view class="rescue">
						<image src="/static/my/火警.png" class="rescue-pic"></image>
						<view>火警</view>
						<text>119</text>
					</view>
					<view class="rescue" >
						<image src="/static/my/急救包.png" class="rescue-pic"></image>
						<view>急救中心</view>
						<text>120</text>
					</view>
					<view class="rescue">
						<image src="/static/my/警察,公安.png" class="rescue-pic"></image>
						<view style="{width: 200rpx;height: 200rpx;}">公安报警</view>
						<text>110</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//维度
				latitude: "",
				//经度
				longitude: "",
				//应急救援表单
				location: '',
				helper: '',
				contact: '',
				brand: '',
				description: '',
				//按钮下边框颜色
				borderBottomColor: '#297BF6 solid 5rpx'

			}
		},
		methods: {
			//三个按钮
			button1() {
				this.borderBottomColor = '#297BF6 solid 5rpx'

			},
			button2() {
				this.borderBottomColor = '#fff solid 5rpx'
			},
			button3() {
				this.borderBottomColor = '#fff solid 5rpx'
			},
			//地图
			getMyPosition() {
				const that = this;
				uni.getLocation({
					success(resp) {
						console.log(resp);
						that.latitude = resp.latitude
						that.longitude = resp.longitude
					}
				})
			},
			submitForm() {
				// 提交表单的逻辑
				console.log({
					location: this.location,
					helper: this.helper,
					contact: this.contact,
					brand: this.brand,
					description: this.description
				});
				// 这里可以添加进一步的处理逻辑
			},
			toRescueRecord() {
				uni.navigateTo({
					url: '/pages/CarMaintenance/WRescueRecord/WRescueRecord'
				})
			}
		},
		onReady() {
			this.getMyPosition()
		},
	}
</script>

<style>
	.emergencyRescue {
		position: relative;
		background-color: #F7F7F7;
		margin: 0 auto;
	}

	.emergencyRescue-back {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #297BF6;
		height: 320rpx;
		color: aliceblue;
	}

	.emergencyRescue-content {
		position: absolute;
		width: 96%;
		top: 30rpx;
		left: 15rpx;
		margin: 0 auto;

	}

	.content-map {
		margin-top: 20rpx;
		background-color: #FFF;
		border-radius: 25rpx;
		height: 400rpx;
	}

	.ditu>map {
		width: 100%;
		height: 100%;
	}

	.content-order {
		border-radius: 25rpx;
		margin-top: 20rpx;
		background-color: #fff;

	}

	.order-top {
		display: flex;
		justify-content: space-around;
		margin: 20rpx 0;
	}

	.top-button {
		padding: 20rpx 20rpx;
		font-size: 36rpx;
	}

	.top-button:focus {
		border-bottom: #297BF6 solid 5rpx;
	}

	.order-content {
		padding: 20rpx;

	}

	.form-item {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: left;

	}

	.label {
		display: block;
		margin-bottom: 10rpx;
		color: #333;
		width: 140rpx;
		margin-left: 60rpx;
		margin-top: 10rpx;
		line-height: 50rpx;
	}

	.input,
	.textarea {
		height: 50rpx;
		padding: 10rpx;
		border: 1px solid #ccc;
		border-radius: 5rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
	}

	.textarea {
		height: 50rpx;
		resize: none;
		width: 340rpx;
	}

	.submit-button {
		width: 400rpx;
		background-color: #FF6A00;
		color: white;
		border: none;
		border-radius: 50rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.button-bottom {
		margin-top: 10rpx;
		border: none;
		text-align: center;
		font-size: 26rpx;
	}

	.order-bottom {
		margin-top: 20rpx;
		margin-bottom: 50rpx;
		border-radius: 25rpx;
		background-color: #FFF;

	}

	.bottom-top {
		height: 100rpx;
		line-height: 100rpx;
		margin-left: 20rpx;
		font-size: 36rpx;

	}

	.bottom-bottom {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		font-size: 30rpx;
	}
	.rescue{
		width: 150rpx;
		margin: 30rpx auto;
		text-align: center;
	}
	.rescue-pic{
		width: 60rpx;
		height: 60rpx;
		
	}
</style>